<template>
  <div class="card-out-container">
    <CustomTable storeTableName="monitorList" rowKey="id" :loading="loading" :dataSource="dataSource" :columns="columns" :rowSelection="isEnvLocal ?null:{selectedRowKeys: selectedRowKeys, onChange: onSelectChange, getCheckboxProps: checkboxProps, fixed: 'left'}" :pagination="ipagination" :scroll="{y: showMore? 'calc(100vh - 395px)' : 'calc(100vh - 320px)'}" @change="handleTableChange" :showMore="showMore">
      <template #operateLeft>
        <div class="operate-left">
          <a-button type="primary" @click="handleEdit({status:0},false)">{{ $t('common.addNew') }}</a-button>
          <a-button ghost type="warning" :disabled="!selectedRowKeys.length" @click="handleDelete(null)">{{ $t('common.delMore') }}</a-button>
          <a-button ghost type="primary" @click="loadData">{{ $t('common.refresh') }}</a-button>
        </div>
      </template>
      <template #operateRight>
        <div class="slot-operate-right">
          <a-input-search v-model:value.trim="fuzzySearch" enter-button :placeholder="$t('video.monitoringCodeName')"  @search="loadData" />
        </div>
      </template>
      <template #bodyCell="{ scope }">

        <template v-if="scope.column.key === 'code'">
          <!-- <span class="code-link" @click="handleDrawDetail(scope.record)">{{scope.record.code}} </span>  -->
          <span>{{scope.record.code}} </span>
        </template>
        <template v-if="scope.column.key === 'deviceStatus'">
          <span v-if="scope.record.deviceStatus == 1" ><a-tag color="success">{{ $t('sysManage.normal') }}</a-tag></span>
          <span v-else >/</span>
        </template>
        <template v-else-if="scope.column.key === 'status'">
          <a-switch :checked="!Boolean(scope.record.status)" @change="(value) => changeStatus(value, {id: scope.record.id})" />
        </template>
        <template v-else-if="scope.column.key === 'operate'">
          <span class="table-operate-container">
            <a-button type="link" class="primary-link" @click="handleEdit(scope.record)">{{ $t('common.editor') }}</a-button>
            <a-divider type="vertical" />
            <a-button type="link" class="warning-link" :disabled="!Boolean(scope.record.status)" @click="handleDelete(scope.record.id)">{{ $t('common.del') }}</a-button>
          </span>
        </template>
      </template>
    </CustomTable>
    <operate-modal ref="modalForm" @ok="operateOk"/>
  </div>
</template>

<script>
import { ListMixinPm } from '@/mixin/listMixinPm.js' 
import OperateModal from './modules/operateModal.vue'
import CustomTable from '@/components/commonTable/customTable.vue'
import {columns} from './modules/config'  
export default {
  name: 'monitorList',
  mixins: [ListMixinPm],
  components: { 
    OperateModal,
    CustomTable, 
  },
  data () {
    return {
      url: {
        list: '/api/monitor/device/page',
        delete: '/api/monitor/device/delete',
        changeStatus: '/api/monitor/device/updateStatu'
      },
      columns,
      fuzzySearchName: 'query',
    }
  },
  methods: {
    // onChangeSwitch(value, record) {
    //   let params = {
    //     id: record.id,
    //     enableFlag: value? 1:0
    //   }
    //   this.customChangeStatus(this.url.save, params )
    // }
    operateOk(){
      this.loadData()
    }
  },
  created () {
     
  }
}
</script>